<template>
  <div>
    <List item-layout="vertical" :split="false" size="small">
      <ListItem v-for="item in replyComment" :key="item.id" class="reply">
        <ListItem>
          <Avatar shape="square" size="small" :src="item.avatar"></Avatar>&nbsp;<span
          style="color: #2d9aff">{{item.nickname}}&nbsp;</span>回复:
          &nbsp;<span style="color: #2d9aff">{{comment.nickname}}</span>
          <li style="margin-left: 30px">{{item.content}}</li>

          <template slot="action">
            <li>
              <Icon type="ios-calendar-outline"/>
              {{dateFilter(item.createTime)}}
            </li>
            <li>
                            <span @click="toParent(comment,item)">
                                <Icon type="ios-chatbubbles-outline"/> 回复
                            </span>
            </li>
          </template>
        </ListItem>
        <div v-if="item.replyComments" class="reply">
          <reply :replyComment="item.replyComments" :comment='item'
                 v-bind="$attrs" v-on="$listeners"></reply>
        </div>

      </ListItem>
    </List>
  </div>

</template>
<script>

export default {
  name: 'Reply',
  props: {
    comment: {},
    replyComment: Array,

  },
  data() {
    return {}
  },
  methods: {
    //获取父类的方法
    toParent(comment, item) {
      this.$emit('showCommentInput',comment, item);
    },
    //格式化时间的方法
    dateFilter: function (input) {
      var d = new Date(input);
      var year = d.getFullYear();
      var month = d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
      var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
      var hour = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours();
      var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
      var seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
      return (year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds);
    },
  }
}
</script>

<style scoped>
.reply {
  margin-left: 10px;
}

</style>
